<script setup>
	// import { useGuessList } from '@/composables'
	// import { useMemberStore } from '@/stores'
	// 获取屏幕边界到安全区域距离
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync()

	// 获取会员信息
	const memberStore = ""

	const gotoMypd = () => {
		uni.navigateTo({
			url: '/pages/my/mypd'
		});
	}
	const gotoMyyy = () => {
		uni.navigateTo({
			url: '/pages/my/myyy'
		});
	}
	const gotContactUs = () => {
		uni.navigateTo({
			url: '/pages/my/contactus'
		})
	}
</script>

<template>
	<!-- <scroll-view enable-back-to-top class="viewport" scroll-y> -->
	<view class="background-img">
		<image src="/static/center_bg.png" style="width: 100%;"></image>
	</view>
	<view class="viewport">
		<!-- 个人资料 -->
		<view class="profile">
			<!-- 情况1：已登录 -->
			<view class="overview" v-if="memberStore">
				<navigator url="/pagesMember/profile/profile" hover-class="none">
					<image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
				</navigator>
				<view class="meta">
					<view class="nickname">
						小豆芽
					</view>
					<navigator class="extra" url="/pagesMember/profile/profile" hover-class="none">
						<text class="update">更新头像昵称</text>
					</navigator>
				</view>
			</view>
			<!-- 情况2：未登录 -->
			<view class="overview" v-else>
				<navigator url="/pages/login/login" hover-class="none">
					<image class="avatar gray" mode="aspectFill"
						src="https://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png">
					</image>
				</navigator>
				<view class="meta">
					<navigator url="/pages/login/login" hover-class="none" class="nickname">
						未登录
					</navigator>
					<view class="extra">
						<text class="tips">点击登录账号</text>
					</view>
				</view>
			</view>
			<navigator class="settings" url="/pagesMember/settings/settings" hover-class="none">
				设置
			</navigator>
		</view>
		<!-- 我的订单 -->
		<view class="orders">
			<view class="section">
				<!-- 订单 -->
				<view class="shop-qhyy" @click="gotoMypd">
					<image style="width: 50px;height: 50px;" src="/static/quhao.png"></image>
					<span>我的排队</span>
				</view>
				<view class="shop-qhyy" @click="gotoMyyy">
					<image style="width: 50px;height: 50px;" src="/static/yuyue.png"></image>
					<span>我的预约</span>
				</view>
			</view>
		</view>
		<view class="context">
			<view class="context-info" @click="gotContactUs">
				<image style="width: 20px;height: 20px;" src="/static/myinfo.png"></image>
				<span style="margin-left: 10px;">联系我们</span>
			</view>
			<view class="context-more">
				<image style="width: 20px;height: 20px;text-align: right;" src="/static/more.png"></image>
			</view>
		</view>
		<view class="context">
			<view class="context-info">
				<image style="width: 20px;height: 20px;" src="/static/myinfo.png"></image>
				<span style="margin-left: 10px;">联系我们</span>
			</view>
			<view class="context-more">
				<image style="width: 20px;height: 20px;text-align: right;" src="/static/more.png"></image>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	// page {
	// 	height: 100%;
	// 	overflow: hidden;
	// 	background-color: #f7f7f8;
	// }
	.background-img {
		position: relative;
		z-index: 1;
	}

	.viewport {
		width: 100%;
		position: absolute;
		z-index: 99;
		top: 10px;
	}

	/* 用户信息 */
	.profile {
		margin-top: 30rpx;
		position: relative;

		.overview {
			display: flex;
			height: 120rpx;
			padding: 0 36rpx;
			color: #fff;
		}

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: #eee;
		}

		.gray {
			filter: grayscale(100%);
		}

		.meta {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			line-height: 30rpx;
			padding: 16rpx 0;
			margin-left: 20rpx;
		}

		.nickname {
			max-width: 180rpx;
			margin-bottom: 16rpx;
			font-size: 30rpx;

			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.extra {
			display: flex;
			font-size: 20rpx;
		}

		.tips {
			font-size: 22rpx;
		}

		.update {
			padding: 3rpx 10rpx 1rpx;
			color: rgba(255, 255, 255, 0.8);
			border: 1rpx solid rgba(255, 255, 255, 0.8);
			margin-right: 10rpx;
			border-radius: 30rpx;
		}

		.settings {
			position: absolute;
			bottom: 0;
			right: 40rpx;
			font-size: 30rpx;
			color: #fff;
		}
	}

	/* 我的订单 */
	.orders {
		position: relative;
		z-index: 99;
		padding: 30rpx;
		margin: 50rpx 30rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

		.section {
			width: 100%;
			// justify-content: center;
			// padding: 20rpx 20rpx 10rpx;
			display: flex;
			flex-direction: row;

			// justify-content: center;
			// align-items: center;
			.shop-qhyy {
				// width: 20%;
				padding: 20rpx 60rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.context {
		display: flex;
		flex-direction: row;
		position: relative;
		z-index: 99;
		padding: 30rpx;
		margin: 15rpx 30rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

		.context-info {
			width: 90%;
			font-size: 35rpx;
			padding: 10rpx;
			// margin-right: 20rpx;
		}

		.context-more {
			padding: 10rpx;
		}
	}
</style>